
<template>
  <div class="home">
    <div class="home-top">
      <a href>
        <img src="../images/匠-书房.png" alt />
      </a>
      <p>天奇商城</p>
    </div>
    <div class="home-center">
      <div class="home-left-img"></div>
      <div class="home-left">
        <img src="../assets/0001.jpg" />
      </div>
    </div>

    <div class="home-right">
      <div class="home-right-top">
        <p>天奇账号注册</p>
        <br />
        <input type placeholder="请输入您的账号" :v-model="account" />
        <br />
        <input type="password" placeholder="输入您的密码" :v-model="password" />
        <br />
        <input type="password" placeholder="再次确认您的密码" v-model="password2" />

        <router-link to="/login">
          <button @click="save">注册</button>
        </router-link>
        <router-view></router-view>

        <div id="iphone">手机登陆/注册</div>
      </div>
      <div class="home-right-foot"></div>
    </div>
    <div class="home-foot">
      <p>简体|繁体|English|常见问题|隐私政策</p>
      <p>天奇公司版权所有</p>
    </div>
  </div>
</template>
<style scoped>
.home {
  width: 100%;
  height: 100vh;
  /* background-color: aqua; */
}
.home-top {
  width: 100%;
  height: 98px;
  /* background-color: azure; */
}
.home-top img {
  height: 60px;
  display: flex;
  margin-left: 10%;
  position: relative;
  top: 16%;
}
.home-top p {
  font-size: 30px;
  display: flex;
  margin-left: 15%;
  position: relative;
  top: -65px;
}
.home-center {
  width: 100%;
  height: 588px;
  overflow: hidden;
  background-color: rgb(220, 230, 242);
}
.home-left {
  width: 100%;
  height: 588px;
  float: left;
}
.home-right-top {
  font-size: 30px;
  text-align: center;
  line-height: 83px;
}
.home-left > img {
  width: 500px;
  height: 300px;
  display: flex;
  margin-left: 20%;
  margin-top: 10%;
}
.home-left-img > img {
  width: 150px;
  position: absolute;
  top: 50%;
  left: 23%;
}
.home-right {
  float: left;
  width: 410px;
  height: 500px;
  background-color: white;
  margin-left: 900px;
  margin-top: -570px;
  /* margin-bottom: 180px; */
}
.home-right-top {
  width: 100%;
  height: 83px;
  /* background-color: chartreuse; */
}

.home-right-foot {
  width: 100%;
  height: 179.5px;
  /* background-color: cornsilk; */
  margin-top: 293px;
}

a {
  width: 200px;
  height: 98px;
}
a > img {
  max-width: 100%;
  max-height: 100%;
}
input {
  width: 350px;
  height: 40px;
  position: relative;
  top: -110%;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-left: 0;
}
button {
  position: relative;
  top: -125%;
  width: 350px;
  height: 40px;
  background-color: rgb(255, 103, 0);
  border: none;
}
.home-right-foot > img {
  width: 250px;
  position: relative;
  top: 40%;
  left: 20%;
}
#iphone {
  font-size: 15px;
  position: relative;
  top: -160%;
  /* text-align: center; */
  color: rgb(255, 154, 0);
}
.home-foot {
  text-align: center;
  width: 100%;
  height: 90px;
}
.home-foot > p {
  position: relative;
  padding-top: 15px;
  top: 50%;
}
</style>
<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      // 初始化要注册的账号和密码
      account: null,
      password: null,
      password2: null,
    };
  },
  methods: {
    save() {
      if (this.password == this.password2) {
        // dispatch引用action中的方法（异步操作）
        // commit引用mutations中的方法（同步操作）
        this.$store.dispatch("add", {
          account: this.account,
          password: this.password,
          password2: this.password2,
        });
        // this.$store.dispatch("方法名",参数)
      } else {
        alert("注册成功！");
        this.$router.push("/riester");
      }
    },
  },
  components: {},
};
</script>
